React Server Components RSC

比較

Thinking in Server Components

アプリケーション全体をCSR Client side renderingする代わりに（SPA Single Page Applicationの場合など）、コンポーネントをレンダリングする場所を目的に応じて柔軟に選択できるようになった。

https://gyazo.com/e97169c2d7533bc6c34fa93a36bc7031

1. ページを小さなコンポーネントに分割

2. 非インタラクティブなものは、React Server Components RSCとしてサーバー上でレンダリングできる

感想: まぁ別に何でも感でも、非同期で作る必要はないわな。

? 何も非同期、インタラクティブな事起きないもの限定？

3. インタラクティブなUIには、Client componentsを使用

4. これは、Next.jsのサーバーファーストのアプローチに沿ったものです。

Why Server Components?

利点

React Server Components RSCを使えば、サーバーのインフラをより有効に活用できる

例: データ取得をサーバーで行える。

最初のHTMLがSSR Server Side Renderingされて、client クライアント側で、JSファイルが非同期で読み込まれ、インタラクティブになるため。

移行作業

App Router内のすべてのコンポーネントはデフォルトでServer Components

'use client'ディレクティブでClient Componentsの選択も可能。

When to use Server and Client Components?

使い分け表便利。

Nesting Server Components inside Client Components

Unsupported Pattern: Importing Server Components into Client Components

そりゃそうだ。

Recommended Pattern: Passing Server Components to Client Components as Props

Propsとして、Client componentsに渡せば、SSR Server Side Renderingされた、componentを利用出来るのね。

注意系

serverでしか利用できないcodeの検知で、server-onlyパッケージ使おうね

その他ライブラリでServer Components対応できていないもの多いので、注意

疑問

? 結局Server componentsをレンダリングするサーバーはどうするの？

Node.js動かす必要があるってこと？

説明が直列的、段階的でわかりやすい。

Devtoolなどでどう見るかもわかり易く書いてくれているので、自分のAppのレンダリングの調査するときの参考になる。

技術の課題解決の変遷が分かるので、理解が進む